import { adminConfig } from '@Tea/model'
import classes from './index.module.scss'
import { ElAvatar, ElDropdown, ElDropdownItem,ElMessage, ElDropdownMenu, ElIcon } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { defineComponent } from 'vue'
import { isSuccessCode, useElMessageBox, useGloablLoading } from '@Tea/utils'
import { useLoginOut } from '@/hooks/useLoginOut'
import apiStore from '@/stores/apiStore'
import UserStore from '@/stores/UserStore'

export default defineComponent({
  setup(props, ctx) {
    const { loginOut } = apiStore().api
    const { showLoading, closeLoading } = useGloablLoading() 
    const { userInfo } = UserStore()
    const onLoginOut = () => {
      useElMessageBox({
        content: "确定要退出登录吗?",
        thenCallback: async () => {
          showLoading({
            lock: true,
            text: '退出登录中',
          })
          try {
            const { code, msg } = await loginOut()
            if (isSuccessCode(code)) {
              ElMessage({
                type: "success",
                message: msg
              })
              useLoginOut()
            }
            closeLoading()
          } catch (e) {
            closeLoading()
            console.log(e);
          }
        }
      })
    }
    return () => (
      <header class={classes.header}>
        <section class={`${classes.title} deepColor cursorPointer m-window`}>{adminConfig.systemName}</section>
        <section class={`${classes.headerTool}`}>
          <ElDropdown v-slots={{
            dropdown: () => (
              <ElDropdownMenu>
                <ElDropdownItem>个人信息</ElDropdownItem>
                <ElDropdownItem onClick={onLoginOut}>退出登录</ElDropdownItem>
              </ElDropdownMenu>
            )
          }}>
            <span class={classes.username}>
              <span class={classes.name}>{userInfo.username}</span>
              <ElIcon class="el-icon--caretRight">
                <ArrowDown />
              </ElIcon>
            </span>
          </ElDropdown>
          <ElAvatar
            size={23}
            src="/src/assets/avator.png" />
        </section>
      </header>
    )
  },
})